<template>
  <div class="dailog">
    <el-dialog v-model="props.showDialog" :title="props.id ? '品牌详情' : '新增品牌'" width="500">
      <el-form :model="form">
        <el-form-item label="品牌名称" prop="name">
          <el-input v-model="form.name" type="text" placeholder="请输入品牌名称" />
        </el-form-item>
        <el-form-item label="品牌LOGO" prop="logo">
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.logo" :src="form.logo" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="品牌简介" prop="desc">
          <el-input v-model="form.desc" type="textarea" placeholder="请输入品牌简介" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handlecancel">取消</el-button>
          <el-button type="primary" @click="handlesubmit"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: '0'
  }
})
const form = ref({
  name: '',
  logo: '',
  desc: ''
})
onMounted(async () => {
  if (props.id && props.id !== '0') {
    await getdetail()
  }
})

const getdetail = async () => {
  console.log('发请求获取详情')
}
const handlesubmit = () => {
  console.log('发请求提交')
  emit('hideDialog', false)
}
const emit = defineEmits(['hideDialog'])
const handlecancel = () => {
  emit('hideDialog', false)
}
const beforeAvatarUpload = (rawFile: any) => {
  console.log(rawFile, 'rawFile')
}
const handleAvatarSuccess = (response: any, uploadFile: any) => {
  form.value.logo = URL.createObjectURL(uploadFile.raw)
}
</script>

<style scoped></style>
